<template>
  <div :class="['home-container']">
    <u-swiper :list="list" height="360" img-mode="widthFix"></u-swiper>
    <div class="home-content">
      <div class="tips">
        <div class="tip-item">
          <img src="/static/00.png" alt="">
          <span class="text">免费配送</span>
        </div>
        <div class="tip-item">
          <img src="/static/11.png" alt="">
          <span class="text">晚到必赔</span>
        </div>
        <div class="tip-item">
          <img src="/static/22.png" alt="">
          <span class="text">专业检测</span>
        </div>
        <div class="tip-item">
          <img src="/static/33.png" alt="">
          <span class="text">1小时达</span>
        </div>
      </div>
      <div v-if="adUrl" style="padding: 0 20rpx;background-color: #ffffff">
        <u-image mode="widthFix" style="width: 100%" :src="adUrl"></u-image>
      </div>
      <div class="content2">
        <RecommendList />
      </div>
    </div>
  </div>
</template>
<script>
import RecommendList from "./recommendList.vue";
export default {
  name: "my",
  components: {
    RecommendList,
  },
  data() {
    return {
      list: [

      ],
      adUrl: ''
    };
  },
  onLoad() {
    this.$api.bannerList(1).then(res => {
      this.list = res.map(item => {
        return  item.image
      })
    })
  },
  methods: {
    toPage(url) {
      uni.navigateTo({
        url: url
      });
    },
  }
}
</script>

<style lang="scss">
.home-container {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg,hsla(0,0%,96.9%,0),#f7f7f7,#f7f7f7),linear-gradient(180deg,#fccf00,#cbf7e9);
  .home-content {
    flex-grow: 1;
    overflow: auto;
  }
  .content2 {
    padding: 20rpx;
  }
  .tips {
    background-color: #fff;
    padding: 30rpx;
    display: flex;
    margin-bottom: 30rpx;
    align-items: center;
    justify-content: space-between;
    font-size: 24rpx;
    color: #8d8e99;
    .tip-item {
      display: flex;
      align-items: center;
      img {
        width: 36rpx;
        height: 36rpx;
      }
      .text {
        margin-left: 20rpx;
      }
    }
  }
}
</style>
